<template>
  <div id="main" style="width: 50%; height: 180px;margin-top: -10px;margin-left: 40px"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          data: [
            { value: 1048, name: '空载车', itemStyle: { color: '#FFD700' } }, // 设置空载车为黄色
            { value: 735, name: '满载车' },
            { value: 580, name: '半载车' }
          ]
        }
      ]
    };

    // 添加文本和线条连接空载车
    var angle = option.series[0].data[0].value / 2 * Math.PI / 180;
    // eslint-disable-next-line no-unused-vars
    var radius = '80%'; // 线条长度
    option.graphic = [{
      type: 'line',
      shape: {
        x1: chartDom.clientWidth / 2 + (Math.cos(angle) * 100),
        y1: chartDom.clientHeight / 2 - (Math.sin(angle) * 100),
        x2: chartDom.clientWidth / 2 + (Math.cos(angle) * 120),
        y2: chartDom.clientHeight / 2 - (Math.sin(angle) * 120)
      },
      style: {
        stroke: '#333'
      }
    }, {
      type: 'text',
      style: {
        text: '空载车',
        textAlign: 'center',
        fill: '#333',
        fontSize: 16
      },
      left: chartDom.clientWidth / 2 + (Math.cos(angle) * 140), // 调整文本位置
      top: chartDom.clientHeight / 2 - (Math.sin(angle) * 140)
    }];

    option && myChart.setOption(option);
  }
};
</script>

<style>

</style>
